$(function () {
    var layer = layui.layer;
    var form = layui.form;
    var laypage = layui.laypage;

    // 定义美化时间的过滤器
    template.defaults.imports.dataFormat = function (date) {
        var dt = new Date(date);
        var y = dt.getFullYear();
        var m = String(dt.getMonth());
        var d = String(dt.getDate());

        var hh = String(dt.getHours());
        var mm = String(dt.getMinutes());
        var ss = String(dt.getSeconds());

        return y + '-' + m.padStart(2, '0') + '-' + d.padStart(2, '0')
            + ' ' + hh.padStart(2, '0') + ':' + mm.padStart(2, '0') +
            ':' + ss.padStart(2, '0');
    }

    // 定义一个查询的参数对象，将来请求数据的时候，
    // 需要将请求参数对象提交到服务器
    var q = {
        pagenum: 1, // 页码值，默认请求第一页的数据
        pagesize: 5, // 每页显示几条数据，默认每页显示2条
        cate_id: '', // 文章分类的 Id
        state: '' // 文章的发布状态
    };
    initTable();
    initCate();

    //获取文章列表数据的方法
    function initTable() {
        $.ajax({
            method: 'get',
            url: '/my/article/list',
            data: q,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('获取文章列表失败')
                }
                //使用模板引擎渲染数据
                var htmlStr = template('tpl-table', res)
                $('tbody').html(htmlStr);
                //调用文章分类的方法
                renderPage(res.total);
            }
        })
    }

    //初始化文章分类的方法
    function initCate() {
        $.ajax({
            method: 'get',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) return layer.msg('获取数据失败');
                //console.log('ok');

                //调用模板引擎
                var htmlStr = template('tpl-cate', res);
                //console.log(htmlStr);

                $('[name=cate_id]').html(htmlStr);
                //重新渲染layui表单区域的UI结构
                form.render();
            }
        })
    }

    //为筛选表单绑定submit事件
    $('#form-search').on('submit', function (e) {
        e.preventDefault();
        //获取表单中选项的值
        var cate_id = $('[name = cate_id]').val();
        var state = $('[name = state]').val();
        //为参数对象q中对应的属性赋值
        q.cate_id = cate_id;
        q.state = state;
        //根据最新的筛选条件获取重新渲染表格数据
        initTable();
    })

    // 定义渲染分页的方法
    function renderPage(total) {
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox',    //注意，这里的 test1 是 ID，不用加 # 号
            count: total,       //数据总数，从服务端得到
            limit: q.pagesize,  //每页显示几条数据
            curr: q.pagenum,    //设置默认请求被选中的分页
            //自定义分页排版功能
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            limits: [5, 10],
            //分页发生切换的时候触发jump回调
            //触发jump回调的方式有两种 第一点击页码值 第二只要调用laypage.render就会触发
            jump: function (obj, first) {
                //可以通过判断first的值来判断是通过那种方式触发的jump回调
                //如果first值为true证明是方式二调用的
                //否则是方式一
                //console.log(obj.curr);
                //把最新的页码值赋值到q这个查询参数对象中
                q.pagenum = obj.curr;
                //把最新页目数赋值到q这个查询参数对象,并渲染表格
                q.pagesize = obj.limit;
                //根据最新的q获取最新的数据页面
                // initTable(); 会死循环
                //console.log(first);
                if (!first) initTable();
            }
        });
    }

    //通过代理的方式为删除按钮绑定点击事件处理器
    $('tbody').on('click', '.btn-delete', function () {
        var len = $('btn-delete').length;
        console.log(len);
        // 获取到文章的 id
        var id = $(this).attr('data-id')
        // 询问用户是否要删除数据
        layer.confirm('确认删除?', { icon: 3, title: '提示' }, function (index) {
            $.ajax({
                method: 'GET',
                url: '/my/article/delete/' + id,
                success: function (res) {
                    if (res.status !== 0) {
                        return layer.msg('删除文章失败！')
                    }
                    layer.msg('删除文章成功！')
                    /*当数据删除完成后判断这一页是否含有剩余数据
                    如果没有剩余数据则让页码值-1之后
                    再重新调用initTable*/
                    if (len == 1) {
                        //如果len等于1则证明删除之后页面上就没有任何数据,页码值要减一
                        q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1;
                    }
                    initTable();
                }
            })
            layer.close(index)
        })
    })

    //为编辑按钮绑定事件
    $('tbody').on('click', '.btn-edit', function () {
        //把当前的文章Id存到本地
        var Id = $(this).attr('data-Id');
        var id = JSON.stringify(Id);
        localStorage.setItem('id', id);
        location.href = '/article/art_edit.html';

    })
})